<template>
<el-dialog class="nodeDialog custom-dialog" v-model="dialogVisible" 
    width="400"
    :show-close='false'
    modal-class="dialog-center">
    <div class="custom-dialog-header">
        <div class="title-box">
            <div class="title">{{$t('message.buttons.import')}}</div>
        </div>
        <svg class="close-icon" @click="cancel">
            <use xlink:href="#keowledge-danchuangguanbi1"></use>
        </svg>
    </div>
    <div class="importContainer">
        <el-upload ref="upload" action="x" :file-list="fileList" :auto-upload="false" :multiple="false" :on-change="onChange" :limit="1" :on-exceed="onExceed">
            <template #trigger>
                <el-button size="small" type="primary">{{$t('message.buttons.selectFile')}}</el-button>
            </template>
            <template #tip>
                <div  class="el-upload__tip">{{$t('message.text.importTips')}}</div>
            </template>
        </el-upload>
    </div>
    <template #footer>
        <span class="dialog-footer">
            <el-button @click="cancel">{{$t('message.buttons.cancal')}}</el-button>
            <el-button type="primary" @click="confirm">{{$t('message.buttons.submit')}}</el-button>
        </span>
    </template>
</el-dialog>
</template>
<script setup lang="ts">
import { ref,watch,onMounted,getCurrentInstance,ComponentInternalInstance } from 'vue'
import MindMap from 'simple-mind-map'
import $eventBus from "@/utils/eventBus";
const dialogVisible = ref(false)
const fileList = ref([])
const instance: any = getCurrentInstance() as ComponentInternalInstance;
const proxy: any = instance.proxy as any; // 访问 proxy 属性
import { useHookI18n } from '@/hooks/i18n'
const { locale,$t } = useHookI18n()
onMounted(()=>{
    $eventBus.$on("showImport", () => {
        dialogVisible.value = true;
    })
})

watch(()=>dialogVisible.value,(newV,oldV)=>{
    if(!newV && oldV){
        fileList.value = []
    }
})
function onChange(file) {
    let reg = /\.(smm|xmind|json)$/;
    if (!reg.test(file.name)) {
        proxy.$notify({
            title: $t('message.prompt'),
            message: $t('message.message.importTips'),
            type: 'error',
            position: 'bottom-right'
        });
        fileList.value = [];
    } else {
        fileList.value.push(file)
    }
}
function onExceed() {
    proxy.$notify({
        title: $t('message.prompt'),
        message: $t('message.message.maxOneFiles'),
        type: 'error',
        position: 'bottom-right'
    });
}
function cancel() {
    dialogVisible.value = false;
}

function confirm() {
    if (fileList.value.length <= 0) {
        return proxy.$notify({
            title: $t('message.prompt'),
            message: $t('message.message.checkImportFile'),
            type: 'error',
            position: 'bottom-right'
        });
    }
    // this.$store.commit('setIsHandleLocalFile', false);
    let file = fileList.value[0];
    if (/\.(smm|json)$/.test(file.name)) {
        handleSmm(file)
    } else if (/\.xmind$/.test(file.name)) {
        handleXmind(file)
    }
    cancel();
}

function handleSmm(file) {
    let fileReader = new FileReader()
    fileReader.readAsText(file.raw)
    fileReader.onload = (evt) => {
        try {
            let data = JSON.parse(evt.target.result)
            if (typeof data !== 'object') {
                throw new Error($t('message.message.fileContentError'))
            }
            $eventBus.$emit('setData', data)
            proxy.$notify({
                title: $t('message.prompt'),
                message: $t('message.message.importSuccess'),
                type: 'success',
                position: 'bottom-right'
            });
        } catch (error) {
            console.log(error)
            proxy.$notify({
                title: $t('message.prompt'),
                message: $t('message.message.fileParsingFail'),
                type: 'error',
                position: 'bottom-right'
            });
        }
    }
}

async function handleXmind(file) {
    try {
        let data = await MindMap.xmind.parseXmindFile(file.raw)
        $eventBus.$emit('setData', data)
        proxy.$notify({
            title: $t('message.prompt'),
            message: $t('message.message.importSuccess'),
            type: 'success',
            position: 'bottom-right'
        });
    } catch (error) {
        proxy.$notify({
            title: $t('message.prompt'),
            message:  $t('message.message.fileParsingFail'),
            type: 'error',
            position: 'bottom-right'
        });
    }
}
</script>


<style lang="scss" scoped>
.nodeDialog {
  @include fontFamily;
}
.importContainer{
    padding: 30px 20px;
}
</style>
